<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<f:view>
	<h:head>
		<title>#{messages.appTitle}</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<h:outputStylesheet name="css/style.css" />
		<link rel="shortcut icon" type="image/x-icon" href="#{request.contextPath}/resources/images/favicon.ico"/>
	</h:head>
	<h:body>
		<f:metadata>  
   			<f:event type="preRenderView" listener="#{changePasswordBean.clearData}"></f:event>  
		</f:metadata>
		<div id="header">
			<div class="header_content">
				<h:graphicImage value="/resources/images/logo.gif"
					height="60" width="57"/>			
			</div>
		</div>
		<div id="sub_header">
		</div>
		<div id="content">
			<div class="ruta">
			</div>
			
			<div class="menu">
			</div>
			
			<div class="content_right">
				<p class="titol_content">#{messages.changePasswordTitle}</p>
					<h:form method="post">
						<rich:graphValidator value="#{changePasswordBean}" id="gv">
							<rich:panel header="#{messages.changePasswordUserData}">
								<rich:messages for="gv" 
									infoClass="green" 
									errorClass="red" 
									globalOnly="false" 
									ajaxRendered="true" />
								<rich:messages for="gv" 
									infoClass="green" 
									errorClass="red" 
									globalOnly="true" 
									ajaxRendered="true" />
								<h:panelGrid columns="3">
									<h:outputLabel for="username" styleClass="normal" value="#{messages.changePasswordUsername}:" />
									<h:inputText id="username" value="#{changePasswordBean.username}" autocomplete="off">
										<rich:validator/>
									</h:inputText>
									<rich:message for="username" ajaxRendered="true"/>
									
									<h:outputLabel for="oldPassword" styleClass="normal" value="#{messages.changePasswordOldPassword}:" />
									<h:inputSecret id="oldPassword" value="#{changePasswordBean.oldPassword}" autocomplete="off">
										<rich:validator/>
									</h:inputSecret>
									<rich:message for="oldPassword" ajaxRendered="true"/>
									
									<h:outputLabel for="newPassword" styleClass="normal" value="#{messages.changePasswordNewPassword}:" />
									<h:inputSecret id="newPassword" value="#{changePasswordBean.newPassword}" autocomplete="off">
										<rich:validator/>
									</h:inputSecret>
									<rich:message for="newPassword" ajaxRendered="true"/>

									<h:outputLabel for="retryPassword" styleClass="normal" value="#{messages.changePasswordRetryPassword}:" />	
									<h:inputSecret id="retryPassword" value="#{changePasswordBean.retryPassword}" autocomplete="off">
										<rich:validator/>
									</h:inputSecret>
									<rich:message for="retryPassword" ajaxRendered="true"/>
			
									<f:facet name="footer">
							        	<h:panelGrid columns="2">
											<h:commandButton value="#{messages.changePasswordSubmit}" 
												action="#{changePasswordBean.changePassword}"/>
										</h:panelGrid>					
									</f:facet>
								</h:panelGrid>
							</rich:panel>
						</rich:graphValidator>
						<h:commandLink action="/login.xhtml?faces-redirect=true" 
							value="#{messages.loginSubmit}"
							immediate="true"/>
					</h:form>
			
			    <div class="login">
			    </div>
			</div>
		</div>
		
		<div class="clearer"></div>
	
		<div id="footer">
			<div class="footer_content">
				<div class="footer_content_left">
				<p class="footer_titol">#{messages.footerText}</p>
				</div>	
				<div class="footer_content_center">
				<p class="footer">#{messages.footerCenter}</p>
				</div>	
				<div class="footer_content_right">
				<p class="footer">
					<h:link styleClass="neta" outcome="/legal.xhtml" value="#{messages.footerLegal}"/> | <h:link styleClass="neta" outcome="/contacto.xhtml" value="#{messages.footerContacto}"/></p>
				</div>			
			</div>
		</div>
	</h:body>
</f:view>
</html>